/*
* Copyright (c) 2025 Huawei Device Co., Ltd.
*
* Permission is hereby granted, free of charge, to any person obtaining a copy
* of this software and associated documentation files (the "Software"), to deal
* in the Software without restriction, including but not limited to the rights
* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
* copies of the Software, and to provide persons with access to the Software
* subject to the following conditions:
*
* The above copyright notice and this permission notice shall be included in all
* copies or substantial portions of the Software.
*
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGE OR OTHER
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
* SOFTWARE.
*/

<template>
  <div class="play-list-container">
    <div
      v-if="isLargerPage"
      class="go-back-out"
      @click="goBack"
      :style="{
        paddingTop: `${topAvoidArea ? topAvoidArea : 8}px`,
      }"
    >
      <img src="../../assets/playList/back.png" class="go-back" />
    </div>
    <div>
      <div :class="{ 'container-other-obj': isLargerPage }">
        <PlaylistHeader
          v-if="!isLargerPage"
          :songsLength="songs.length"
          v-bind="$props"
          :topAvoidArea="topAvoidArea"
        />
        <PlaylistHeaderTable v-if="isLargerPage" :bottomAvoidArea="bottomAvoidArea"/>
        <div class="listOut">
          <div v-if="isLargerPage" class="list-header">
            <img
              src="../../assets/playList/play_icon.png"
              class="list-header-image"
            />
            <span class="list-header-text">播放全部</span>
            <span class="list-header-text">{{ songs.length }}</span>
            <div class="flex-style" />
            <img src="../../assets/playList/show_all.png" class="open-icon" />
          </div>
          <div class="table-list" :style="tableListStyle">
            <div class="tableListInner">
              <MultiGridRow
                :columns="{ xs: 12, sm: 12, md: 12, lg: 8, xl: 8 }"
                :gutter="{ x: { xs: 0, sm: 0, md: 24, lg: 24, xl: 24 } }"
                :style="{
                  marginLeft: distanceBorderLift + 'px',
                  marginRight: distanceBorderRight + 'px',
                  width: 'auto',
                  marginBottom: '70px',
                }"
              >
                <MultiGridCol
                  v-for="(item, index) in songs"
                  :key="index"
                  class="song-item"
                  :span="{ xs: 12, sm: 12, md: 6, lg: 4, xl: 4 }"
                >
                  <div class="song-info">
                    <div class="song-title">{{ item.title }}</div>
                    <div class="artist-container">
                      <img
                        src="../../assets/playList/acoustic.png"
                        class="acoustic"
                      />
                      <div class="song-artist">{{ item.artist }}</div>
                    </div>
                  </div>
                  <div class="flex-style" />
                  <img
                    src="../../assets/playList/song_item_icon.png"
                    class="song-icon"
                    :style="{
                      paddingRight: songIconLift + 'px',
                    }"
                  />
                </MultiGridCol>
                <MultiGridCol>
                  <div
                    :style="{
                      height: bottomAvoidArea ? '120px' : '70px',
                    }"
                  ></div>
                </MultiGridCol>
              </MultiGridRow>
            </div>
          </div>
        </div>
      </div>
    </div>
    <CurPlaySong :song="songs[0]" :bottomAvoidArea="bottomAvoidArea" />
  </div>
</template>

<script lang="ts" setup>
import { ref, computed, onMounted, onBeforeUnmount } from 'vue';
import { useRouter } from 'vue-router';
import { songs } from './model';
import CurPlaySong from './components/CurPlaySong.vue';
import PlaylistHeaderTable from './components/PlaylistHeaderTable.vue';
import PlaylistHeader from './components/PlaylistHeader.vue';
import { BreakpointManager } from '@hadss/web_adaptive_layout_ui';
import { MultiGridRow, MultiGridCol } from '@hadss/web_adaptive_layout_vue3';
import {
  AvoidArea,
  AvoidAreaInfo,
  AvoidAreaType,
} from '../../common/windowCommon';

const router = useRouter();
const songsData = ref(songs);
const splitLine = ref(false);
const breakpointManager = new BreakpointManager();
const isLargerPage = ref(false);
const distanceBorderLift = ref(16);
const distanceBorderRight = ref(16);
const distanceTableTop = ref(0);
const songIconLift = ref(0);

const topAvoidArea = ref(0);
const bottomAvoidArea = ref(0);

const unsubscribe = breakpointManager.subscribeToBreakpoint(() => {
  isLargerPage.value = breakpointManager.useBreakpointValue({
    md: false,
    lg: true,
  });
  distanceBorderLift.value = breakpointManager.useBreakpointValue({
    sm: 16,
    md: 24,
  });
  distanceBorderRight.value = breakpointManager.useBreakpointValue({
    sm: 16,
    md: 0,
  });
  distanceTableTop.value = breakpointManager.useBreakpointValue({
    md: 320,
    lg: 100,
  });
  songIconLift.value = breakpointManager.useBreakpointValue({
    sm: 0,
    md: 24,
  });
});

const tableListStyle = computed(() => {
  return {
    height: `calc(100vh - ${distanceTableTop.value}px)`,
  };
});

const goBack = (): void => {
  router.go(-1);
};

const handleAvoidAreaChange = (event: any): void => {
  const data = event.detail as AvoidAreaInfo;
  const areaType = data.type;
  if (areaType === AvoidAreaType.TYPE_SYSTEM) {
    topAvoidArea.value = (window as any).webClass?.pxToVp(
      data.area.topRect.height
    );
  }
  if (areaType === AvoidAreaType.TYPE_NAVIGATION_INDICATOR) {
    bottomAvoidArea.value = (window as any).webClass?.pxToVp(
      data.area.bottomRect.height
    );
  }
};

onMounted(() => {
  if ((window as any).webClass) {
    const webClass = (window as any).webClass;
    const topArea = webClass.getAvoidArea(
      AvoidAreaType.TYPE_SYSTEM
    ) as AvoidArea;
    const bottomArea = webClass.getAvoidArea(
      AvoidAreaType.TYPE_NAVIGATION_INDICATOR
    ) as AvoidArea;
    topAvoidArea.value = webClass.pxToVp(topArea.topRect.height);
    bottomAvoidArea.value = webClass.pxToVp(bottomArea.bottomRect.height);
  }
  window.addEventListener('avoidAreaChange', handleAvoidAreaChange);
});

onBeforeUnmount((): void => {
  // 销毁断点对象
  if (unsubscribe) {
    unsubscribe();
  }
  window.removeEventListener('avoidAreaChange', handleAvoidAreaChange);
});
</script>

<style scoped>
.play-list-container {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.song-item {
  display: flex;
  flex-direction: row;
  border-bottom: 1px solid #ddd;
  height: 64px;
  align-items: center;
}

.song-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.song-title {
  font-size: 16px;
  font-weight: 500;
  line-height: 21px;
  color: rgba(0, 0, 0, 0.9);
}

.song-artist {
  font-size: 12px;
  color: rgba(0, 0, 0, 0.4);
  margin-left: 4px;
  line-height: 16px;
}

.artist-container {
  display: flex;
  flex-direction: row;
  margin-top: 2px;
}

.song-icon {
  width: 20px;
  height: 20px;
}

.acoustic {
  width: 16px;
  height: 16px;
}

.list-header {
  height: 48px;
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-left: 32px;
}

.list-header-image {
  width: 32px;
  height: 32px;
}

.list-header-text {
  margin-left: 8px;
  font-size: 18px;
  color: rgba(0, 0, 0, 0.9);
  font-weight: 700;
  line-height: 24px;
}

.open-icon {
  width: 20px;
  height: 20px;
  margin-right: 24px;
}

.go-back {
  width: 40px;
  height: 40px;
}

.go-back-out {
  height: 56px;
  display: flex;
  cursor: pointer;
  margin-left: 24px;
}

.list-out {
  flex: 1;
  display: flex;
  flex-direction: row;
}

.flex-style {
  flex: 1;
}

.container-other-obj {
  display: flex;
}
.table-list {
  overflow-y: scroll;
}
.listOut {
  flex: 1;
}
.song-item-bottom {
  padding: 100px 0;
}
</style>
